<template>
  <div class="box">
    <div class="title"><p>未来七天游客数量趋势图</p></div>
    <div class="echarts" ref="EchartsVc"></div>
  </div>
</template>

<script setup lang="ts">
import {onMounted, ref} from "vue";
import * as echarts from 'echarts';
import type {EChartsType} from "echarts";

let EchartsVc = ref<any>();

onMounted(() => {
  let mychart: EChartsType = echarts.init(EchartsVc.value);
  mychart.setOption({
    grid: {
      top: 30,
      left: 40,
      right: 20,
      bottom: 20
    },
    //标题组件
    title: {
      text: "游客访问量趋势"
    },
    //x|y
    xAxis: {
      type: 'category',
      //两侧不留白
      boundaryGap: false,
      splitLine: {show: false}, //分割线
      data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
    },
    yAxis: {
      splitLine: {show: false},//分割线
      axisLine: {show: true},//y轴的轴线
      axisTick: {show: true},//刻度

    },
    //系列
    series: [
      {
        type: 'line',
        data: [123, 51, 62, 32, 88, 31, 15],
        //平滑
        smooth: true,
        //区域填充样式
        areaStyle: {
          //支持渐变样式
          color: {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [{offset: 0, color: 'red'}, {offset: 1, color: 'blue'}]
          }
        }
      }
    ]

  })

})

</script>

<style scoped lang="scss">
.box {
  width: 100%;
  height: 100%;
  background: rgba(168, 178, 177, 0.35);

  .title {
    margin-top: 10px;
    margin-left: 10px;

    p {
      color: white;
      font-size: 20px;
    }
  }

  .echarts {
    height: calc(100% - 40px);
  }
}
</style>